<template>
  <div class="information">
     <!-- tab切换 -->
    <div class="tabBox">
      <div>
        <div
          v-for="(item, index) in tabData"
          :key="index"
          :class="tabIndex == index ? 'active' : ''"
          @click="tabBtn(index)"
        >
          <span>{{ item }}</span>
        </div>
      </div>
    </div>
      <!-- 新闻区域 -->
    <dl class="Item" v-for="(item, index) in newslist" :key="index" @click="godetail(item.id)">
      <dt>
        <img
          src="https://ke-image.ljcdn.com/110000-inspection/pc1_fjxvpWn3H_1.jpg!m_fill,w_210,h_164,f_jpg?from=ke.com"
          alt=""
        />
      </dt>
      <div class="right">
        <dd class="title">
          {{ item.title }}
        </dd>
        <dd class="footer">
          <span>{{ item.from }}</span
          ><span>{{ item.date }}</span>
        </dd>
      </div>
    </dl>
  </div>
</template>

<script>
import request from "../../utils/information";
export default {
  data() {
    return {
      //地区ID
      area: "AREA|88cff55c-aaa4-e2e0",
      //新闻列表
      newslist: [],
      //tab切换
      tabData: ["楼盘资讯", "购房宝典", "房产百科"],
      tabIndex: 0,
    };
  },
   methods:{
     //tab切换
            tabBtn(index){
      this.tabIndex = index;
	},
  godetail(id){
    uni.navigateTo({ url: `/pages/informationdetail/index?id=${id}` ,})
  }
    },
  onShow() {
    //获取数据
    request.get("/home/news", this.area).then((ok) => {
      this.newslist = ok.body;
      
    });
  },
};
</script>

<style lang="scss" scoped>
// 主页
.information {
  width: 100%;
  height: 100%;
}
//列表项
.Item {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 60rpx 0;
  border-bottom: 1rpx solid #ccc;
  dt {
    width: 300rpx;
    height: 200rpx;
    margin: 0 40rpx;
    border-radius: 20rpx;
    overflow: hidden;
    img {
      width: 300rpx;
      height: 200rpx;
    }
  }
  .title {
    width: 100%;
    font-size: 34rpx;
    font-weight: 800;
    margin-bottom: 30rpx;
  }
}
.footer {
  span {
    margin: 10rpx;
    font-size: 24rpx;
    color: #ccc;
  }
}
//  tab切换
.tabBox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20rpx 0;
      > div {
        flex: 1;
        text-align: center;
        > span {
          padding: 20rpx;
          margin: 0 30rpx;
          font-size: 30rpx;
        }
      }
    .active {
         span {
          padding: 20rpx;
          margin: 0 30rpx;
          font-size: 30rpx;
          border-bottom: 2px solid rgb(224, 22, 147);
        }
      }
    }
      
  }
</style>